Takeaway

• Reducer邏輯：讓「事件處理函數」派遣action給響應的「reducer函數」
• 如何使用useReducer：將setter的邏輯改成dispatch，確定下個狀態要幹嘛 → 寫reducer函數 → 宣告const [tasks, dispatch] = useReducer(reducer函數, 初始狀態);
• useReducer可以實現簡易的Flux模式
• Flux邏輯：先定義規則（action） → 把規則派遣給狀態管理處（reducer函數/store） → 狀態管理處根據規則更新狀態（state）
• 在事件處理函數裡dispatch({　action　});
• action裡通常會有type和id等資訊
• 寫action要把數種變化視為同一行為。譬如以「重置」代表重設好幾個列
• reducer函數接受兩個參數：分別是tasks（初始狀態）和action（要幹嘛）
• 引入immer後，tasks當然也可以用draft來取代
• 比起if…else，reducer函數更常使用switch…case語句
• Reducer的概念來自陣列方法的reduce
• Reducer要寫的程式碼可能更多，但比State更適合用來測試和除錯
• Reducer也比State適合更複雜的情境
• useReducer的概念很像Redux，但是沒有global store和middleware的功能
• useReducer搭配useContext，可以實作類似前者的功能
• useReducer隱藏的第三個參數：初始函數（Init function）
• 初始函數可以實現惰性初始化（Lazy initialization），只有在初次render時會被調用。其目的是提升效能，同時可以把初始狀態抓出來另外做處理
• 其實useState的原始碼是用useReducer寫的
• 其實useState也可以做惰性初始化